<template>
  <div class="plus-container" v-loading="loading">
    <div v-if="listData.length > 0">
      <div v-for="(item, index) in listData" :key="index">
        <div class="common-form">{{ item.name }}</div>
        <div class="plus-list">
          <div class="item" v-for="(child, num) in item.children" :key="num" v-auth="child.path">
            <div class="item-box" @click="gotoPath(child)">
              <div class="card">
                <div class="icon iconfont" :class="hasIcon(child.icon)"></div>
                <div class="ml10 r">
                  <h3>{{ child.name }}</h3>
                  <p>{{ child.remark }}</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div v-else>
      <!-- 当 filteredList 为空时的内容 -->
       <div>无插件可供使用</div>
    </div>
  </div>
</template>

<script>
import PlusApi from "@/api/plus.js";
import ShopPlusApi from "@/api/shopPlus.js";
import { useUserStore } from "@/store";
const { userInfo } = useUserStore();

export default {
  data() {
    return {
      /*是否正在加载*/
      loading: true,
      /*数据*/
      listData: [],
      /*插件列表数据*/
      list: [],
    };
  },
  created() {
    this.getData();
  },

  methods: {
    /*获取数据*/
    getData() {
      let self = this;
      PlusApi.plusList({}, true)
        .then((res) => {
          self.loading = false;
          // self.listData = res.data;
          // self.buildTree(data.data.list, false);
          // console.log(res);

          //获取商城绑定的插件
          ShopPlusApi.plusList({ appId: userInfo.AppID }, true).then((resBindPlus) => {
            if (resBindPlus.data.length > 0) {
              let plusData = [];
              let tmpPData = [];
              //比较
              res.data.forEach(element => {
                tmpPData = JSON.parse(JSON.stringify(element));
                tmpPData.children = [];
                element.children.forEach(elementChild => {
                  resBindPlus.data.forEach(elementChildBind => {
                    if (elementChild.accessId == elementChildBind.accessId) {
                      tmpPData.children.push(elementChild);
                    }
                  });
                });

                if (tmpPData.children.length > 0) {
                  plusData.push(tmpPData);
                }
              });
              self.listData = plusData;
            }
            else {
              // self.listData = res.data;
            }
          });


        })
        .catch((error) => { });
    },

    /*构建树结构*/
    buildTree(list, flag) {
      if (!flag) {
        for (let i = 0; i < list.length; i++) {
          let item = list[i];
          if (item.parent_id == 0) {
            item.children = [];
            this.list.push(item);
            list.splice(i, 1);
            i--;
          }
        }
      } else {
        for (let i = 0, leng = list.length; i < leng; i++) {
          let item = list[i];
          for (let j = 0, j_leng = this.list.length; j < j_leng; j++) {
            let j_item = this.list[j];
            if (item.parent_id == j_item.plus_id) {
              j_item.children.push(item);
              list.splice(i, 1);
              i--;
              break;
            }
          }
        }
      }

      if (!flag) {
        this.buildTree(list, true);
      }
      return;
    },

    /*生成二级菜单 并把子集的以下全编程二级*/
    /* buildTree(list) {
      for (let i = 0, leng = list.length; i < leng; i++) {
        let item = list[i];
        if (item.parent_id == 0) {
          item.children = [];
          this.list.push(item);
          list.splice(i,1);
          i--;
        } else {
          for (let j = 0, j_leng = this.list.length; j < j_leng; j++) {
            let j_item = this.list[j];
            if (item.parent_id == j_item.plus_id) {
              j_item.children.push(item);
              list.splice(i,1);
              i--;
              break;
            }
            else{
              for(let p=0,p_leng=j_item.children.length;p<p_leng;p++){
                let child=j_item.children[p];
                if(item.parent_id==child.plus_id){
                  j_item.children.push(item);
                  list.splice(i,1);
                  i--;
                  break;
                }
              }
            }
          }
        }
      }
      if(list.length>0){
        this.buildTree(list);
      }
      return;
    }, */

    //判断是否有图标
    hasIcon(e) {
      if (e != null && e.length > 0) {
        return e;
      } else {
        return "icon-chajian1";
      }
    },
    gotoPath(v) {
      let path = v.path;
      if (v.redirectName) {
        path = v.redirectName;
      }
      this.$router.push(path);
    },
  },
};
</script>

<style lang="scss">
.plus-container {
  min-height: 400px;

  .item {
    cursor: pointer;

    &:hover {
      h3 {
        color: #3a8ee6;
      }
    }
  }

  .card {
    display: flex;

    .iconfont {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 40px;
      height: 40px;
      border-radius: 8px;
      line-height: 40px;
      background: #3a8ee6;
      color: #ffffff;
      font-size: 22px;
    }
  }

  .r {
    flex: 1;

    h3 {
      font-weight: normal;
      color: #333333;
      font-size: 14px;
    }

    p {
      font-size: 12px;
      color: #999999;
    }
  }
}

.plus-container .common-form {
  margin-bottom: 0;
}

.plus-list {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.plus-list .item {
  width: 25%;
}

.plus-list .item .item-box {
  padding: 20px;
}

.plus-list .item .item {
  width: 100%;
  display: flex;
  height: 60px;
  padding-left: 10px;
  justify-content: flex-start;
  align-items: center;
}
</style>
